<template>
  <k-form-modal
    title="新建抖店订单"
    label-width="100px"
    :rules="rules"
    v-bind="formModalState"
    width="520px"
    :confirm-disabled="!hasPermission(AuthCode.KGJ_ORDER_UPDATE, false)"
    v-on="formModalEvent"
  >
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="state.model.mobile" placeholder="请输入手机号" />
    </el-form-item>
    <el-form-item label="抖店订单号" prop="trade_no">
      <el-input v-model="state.model.trade_no" placeholder="请输入抖店订单号" />
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useFormModal, baseAlert } from '@crud/index';
import { createDouOrder } from '@/api/crm-kgj/order';
import { hasPermission, AuthCode } from '@/modules/auth';

const formRef = ref();
const emits = defineEmits(['after-submit']);

interface DouOrderModel {
  mobile: string;
  trade_no: string;
}

const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  formRef,
  model: {
    mobile: '',
    trade_no: ''
  } as DouOrderModel,
  getParams: (model: DouOrderModel) => model,
  onShow: () => {
    methods.resetModel();
  },
  onSubmit: async (model: DouOrderModel) => {
    const res = await createDouOrder({ mobile: model.mobile, trade_no: model.trade_no });
    if (!res.err) {
      ElMessage.success('新建抖店订单成功');
      emits('after-submit');
    }
    return res;
  }
});

const rules = {
  mobile: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
  ],
  trade_no: [{ required: true, message: '请输入抖店订单号' }]
};
defineExpose({
  show: methods.show
});
</script>
